<template>
  <div
    class="h-full bg-zinc-200 dark:bg-zinc-800 duration-400 overflow-auto xl:pt-[.1rem]"
  >
    <div
      class="relative max-w-screen-lg mx-auto bg-white dark:bg-zinc-900 duration-400 xl:rounded-sm xl:border-zinc-200 xl:dark:border-zinc-600 xl:border-[1px] xl:px-[.4rem] xl:py-[.2rem]"
    >
      <!-- 移动端 navbar -->
      <m-navbar sticky v-if="isMobileTerminal" :clickLeft="onNavbarLeftClick">
        个人资料
      </m-navbar>
      <!-- pc 端 -->
      <div
        v-else
        class="text-lg font-bold text-center mb-[.4ren] dark:text-zinc-300"
      >
        个人资料
      </div>
      <div
        class="h-full w-full px-[.1rem] pb-[.4rem] text-sm mt-[.2rem] xl:w-2/3 xl:pb-[0px]"
      >
        <!-- 头像 -->
        <div class="py-1 xl:absolute xl:right-[16%] xl:text-center">
          <span
            class="w-[.8rem] inline-block mb-[.2rem] font-bold text-sm dark:text-zinc-300 xl:block xl:mx-auto"
            >我的头像</span
          >
          <!-- 头像部分 -->
          <div
            class="relative w-[80px] h-[80px] group xl:cursor-pointer xl:left-[50%] xl:translate-x-[-50%]"
            @click="onAvatarClick"
          >
            <img
              v-lazy
              :src="userStore.userInfo.avatar"
              alt=""
              class="rounded-[50%] w-full h-full xl:inline-block"
            />
            <div
              class="absolute top-[0] rounded-[50%] w-full h-full bg-[rgba(0,0,0,.4)] hidden xl:group-hover:block"
            >
              <img
                name="change-header-image"
                src="@/assets/style/svg/change-header-image.svg"
                class="w-[.2rem] h-[.2rem] m-auto mt-[.2rem]"
              />
              <div
                class="text-xs text-white dark:text-zinc-300 scale-90 mt-[0.5px]"
              >
                点击更换头像
              </div>
            </div>
          </div>
          <!-- 隐藏域 -->
          <input
            v-show="false"
            ref="inputFileTarget"
            type="file"
            accept=".png, .jpeg, .jpg, .gif"
            @change="onSelectImgHandler"
          />
          <p
            class="mt-[.1rem] text-zinc-500 dark:text-zinc-400 text-xs xl:w-[1rem]"
          >
            支持 jpg、png、jpeg 格式大小 5M 以内的图片
          </p>
        </div>
        <!-- 用户名 -->
        <div class="py-[.1rem] xl:flex xl:items-center xl:my-[.1rem]">
          <span
            class="w-[.8rem] block mb-[.1rem] font-bold dark:text-zinc-300 xl:mb-[0px]"
            >用户名</span
          >
          <m-input
            v-if="userInfo.title"
            v-model="userInfo.nickname"
            class="w-full"
            type="text"
            max="20"
          ></m-input>
        </div>
        <!-- 职位 -->
        <div class="py-[.1rem] xl:flex xl:items-center xl:my-[.1rem]">
          <span
            class="w-[.8rem] block mb-[.1rem] font-bold dark:text-zinc-300 xl:mb-0"
            >职位</span
          >
          <m-input
            v-if="userInfo.title"
            v-model="userInfo.title"
            class="w-full"
            type="text"
          ></m-input>
        </div>
        <!-- 公司 -->
        <div class="py-[.1rem] xl:flex xl:items-center xl:my-[.1rem]">
          <span
            class="w-[.8rem] block mb-[.1rem] font-bold dark:text-zinc-300 xl:mb-0"
            >公司</span
          >
          <m-input
            v-if="userInfo.title"
            v-model="userInfo.company"
            class="w-full"
            type="text"
          ></m-input>
        </div>
        <!-- 个人主页 -->
        <div class="py-[.1rem] xl:flex xl:items-center xl:my-[.1rem]">
          <span
            class="w-[.8rem] block mb-[.1rem] font-bold dark:text-zinc-300 xl:mb-[0px]"
            >个人主页</span
          >
          <m-input
            v-if="userInfo.title"
            v-model="userInfo.homePage"
            class="w-full"
            type="text"
          ></m-input>
        </div>
        <!-- 个人介绍 -->
        <div class="py-[.1rem] xl:flex xl:my-[.1rem]">
          <span
            class="w-[.8rem] block mb-[.1rem] font-bold dark:text-zinc-300 xl:mb-[0px]"
            >个人介绍</span
          >
          <m-input
            v-if="userInfo.title"
            v-model="userInfo.introduction"
            class="w-full"
            type="textarea"
            max="50"
          ></m-input>
        </div>
        <!-- 保存修改 -->
        <m-button
          class="w-full mt-[.2rem] mb-[.4rem] dark:text-zinc-300 dark:bg-zinc-800 xl:w-[160px] xl:ml-[50%] xl:translate-x-[-50%]"
          @click="saveUserInfo"
          >保存修改</m-button
        >
        <!-- 移动端退出登录 -->
        <m-button
          v-if="isMobileTerminal"
          class="w-full dark:text-zinc-300 dark:bg-zinc-800 xl:w-[160px] xl:ml-[50%] xl:translate-x-[-50%]"
          @click="onLogoutClick"
        >
          退出登录
        </m-button>
      </div>
    </div>
    <!-- PC端 -->
    <m-dialog v-if="!isMobileTerminal" v-model="isDialogVisible">
      <change-avatar :blob="currentImg" @close="isDialogVisible = false" />
    </m-dialog>
    <!-- 移动端：在展示时指定高度 -->
    <m-popup v-else v-model="isDialogVisible" style="top: 0">
      <change-avatar
        :blob="currentImg"
        @close="isDialogVisible = false"
      ></change-avatar>
    </m-popup>
  </div>
</template>

<script>
export default {
  name: 'profile'
}
</script>

<script setup>
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { isMobileTerminal } from '@/utils/flexible'
import { confirm, message } from '@/libs'
import { useUserStore } from '@/store/user'
import { putProfile } from '@/server/api/sys'
import ChangeAvatar from './components/change-avatar.vue'
import { useSystemStore } from '@/store/system'

const userStore = useUserStore()
const systemStore = useSystemStore()
const router = useRouter()

const userInfo = ref(userStore.userInfo)
const isDialogVisible = ref(false)
const currentImg = ref('')

// 隐藏域
const inputFileTarget = ref(null)
/**
 * 更换头像点击事件
 */
const onAvatarClick = () => {
  inputFileTarget.value.click()
}

/**
 * 头像选择之后的回调
 */
const onSelectImgHandler = () => {
  isDialogVisible.value = true
  const imgFile = inputFileTarget.value.files[0]
  const blob = URL.createObjectURL(imgFile)
  currentImg.value = blob
}

/**
 * 移动端后退处理
 */
const onNavbarLeftClick = () => {
  // 移动端下跳转类型
  systemStore.routerType = 'back'
  router.back()
}

/**
 * 移动端：退出登录
 */
const onLogoutClick = () => {
  confirm('确定要退出登录吗？').then(() => {
    userStore.logout()
    router.push('/')
  })
}

/**
 * 保存用户表单信息
 */
const saveUserInfo = async () => {
  const userInfoVal = userInfo.value
  console.log(userInfoVal)
  await putProfile(userInfoVal)
  message('success', '修改信息成功')
  userStore.userInfo = userInfoVal
}

watch(
  () => userStore.userInfo,
  (val) => {
    userInfo.value = val
  }
)

watch(
  () => userStore.company,
  (val) => {
    console.log(val)
  }
)

watch(isDialogVisible, (val) => {
  if (!val) {
    inputFileTarget.value.value = null
  }
})
</script>
